<template>
  <view class="personaInfo">
    <u-form ref="uForm" :model="form" label-width="160">
      <u-form-item :label="$t('用户头像')">
        <image :src="form.base64HeadImage" style="width: 50px; height: 50px"></image>
        <!-- <u-upload @on-uploaded="uploadedFn" @on-remove="removeFn" :show-progress="upload.progress" :action="upload.baseUrl+api.GLOBAL_file_fileInfo_uploadAndGetFile" width="150" height="150" :file-list="upload.fileList" max-count="1" :header="{'Authorization':userToken,'us': 'app'}" :multiple="false" :max-count="1"></u-upload> -->
      </u-form-item>
      <u-form-item :label="$t('用户角色')" prop="roleList" required>
        <view class="form-view">
          <u-tag
            v-for="(item, index) in form.roleList"
            :key="index"
            :text="item"
            class="u-tag"
            size="mini"
            type="success"
          />
        </view>
      </u-form-item>
      <u-form-item :label="$t('公司及部门')" prop="departmentList" required>
        <view class="form-view">
          <u-tag
            v-for="(item, index) in form.departmentList"
            :key="index"
            :text="item"
            class="u-tag"
            size="mini"
            type="warning"
          />
        </view>
      </u-form-item>
      <u-form-item :label="$t('手机号码')" prop="phone" required>
        <u-input v-model="form.phone" />
      </u-form-item>
      <u-form-item :label="$t('真实姓名')" prop="userName" required>
        <u-input v-model="form.userName" />
      </u-form-item>
      <u-form-item :label="$t('用户描述')" prop="remark">
        <u-input v-model="form.remark" />
      </u-form-item>
    </u-form>
    <u-button type="primary" @click="submission">{{$t('立即更新')}}</u-button>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: mapGetters(['userInfo', 'api', 'app', 'userToken']),
  data() {
    return {
      upload: {
        progress: true,
        baseUrl: uni.getStorageSync('baseUrl'),
        fileList: []
      },

      form: {
        base64HeadImage: '',
        phone: '',
        userName: '',
        remark: '',
        roleList: [],
        headImg: ''
      },
      rules: {
        phone: [
          {
            required: true,
            message: this.$t('必填'),
            trigger: ['change', 'blur']
          }
        ],
        userName: [
          {
            required: true,
            message: this.$t('必填'),
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  onLoad() {
    uni.setNavigationBarTitle({title: this.$t('个人信息')})
    //获取个人信息
    this.getMyuserInfo()
  },
  methods: {
    ...mapActions(['set_userInfo', 'set_userToken']),
    //更新
    submission() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.$u
            .post(this.api.GLOBAL_personal_center_edit, this.form, {
              'content-type': 'application/json;charset=UTF-8'
            })
            .then((res) => {
              if (res.code === 200) {
                uni.showToast({ title: this.$t('更新成功'), duration: 2000 })
                //stroe存储登陆用户信息
                this.set_userInfo(res.data)
                this.set_userToken(res.data.token)
              }
            })
        }
      })
    },
    //获取个人信息
    getMyuserInfo() {
      this.$u.post(this.api.GLOBAL_auth_user_get, {}).then((res) => {
        if (res.code === 200) {
          this.form = res.data
          if (res.data.headImg && res.data.headImg.fileId) {
            this.upload.fileList = [
              {
                ...res.data.headImg,
                url: res.data.headImg.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
              }
            ]
            this.upload.progress = false
            this.form.base64HeadImage =
              res.data.headImg.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
          } else {
            this.upload.fileList = []
            this.form.headImg = ''
          }
        }
      })
    },
    removeFn() {
      this.upload.progress = true
      this.form.headImg = ''
    },
    uploadedFn(e) {
      let code = e[0].response.code
      if (code === 200) {
        uni.showToast({
          title: this.$t('上传成功'),
          icon: 'none'
        })
        this.form.headImg = e[0].response.data.fileId
        this.upload.progress = false
      } else if (code > 600 || code === 600) {
        uni.showToast({
          title: e[0].response.msg,
          icon: 'none'
        })
        uni.reLaunch({
          url: '/pages/template/login/login'
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.personaInfo {
  height: 100%;
  padding: 0 30rpx;

  .form-view {
    .u-tag {
      margin-right: 10rpx;
    }
  }
}
</style>
